<template>
  <div class="article-detail-wrap">
    <el-form :model="articleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="articleForm.title" placeholder="请输入文章标题"></el-input>
      </el-form-item>
      <el-form-item label="文章描述" prop="description">
        <el-input type="textarea" v-model="articleForm.description" placeholder="请输入文章描述"></el-input>
      </el-form-item>
      <el-form-item label="文章内容" prop="content">
        <mavon-editor
          v-model="articleForm.content"
          codeStyle="github"
          :ishljs="true"
          ref="mavon"
          @imgAdd="$imgAdd"
          @imgDel="$imgDel"
        >
        </mavon-editor>
      </el-form-item>
      <el-form-item label="缩略图" prop="">
        <el-upload
          ref="cover"
          action="cover"
          accept=".png, .jpg, .jpeg"
          :show-file-list="false"
          :limit="1"
          :before-upload="beforeUpload"
          :http-request="uploadFile"
        >
          <div class="avatar">
            <img v-if="articleForm.imgPath" :src="articleForm.imgPath">
            <i v-else class="el-icon-plus"></i>
          </div>
          <div slot="tip" class="el-upload__tip">只能上传png、jpg、jpeg格式的文件，且不超过5M</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="分类" prop="classify">
        <el-select v-model="articleForm.classify" placeholder="请选择分类">
          <el-option
            v-for="(item,k) in classifyList"
            :key="k"
            :label="item.classify"
            :value="item.classify">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签" prop="tags">
        <el-tag
          v-for="tag in articleForm.tags"
          :key="tag"
          closable
          :disable-transitions="false"
          @close="closeTag(tag)">
          {{tag}}
        </el-tag>
        <el-button class="button-new-tag" size="small" @click="showTagDialog">+ New Tag</el-button>
      </el-form-item>
      <el-form-item label="是否展示" prop="isShow">
        <el-switch
          v-model="articleForm.isShow"
          :active-value="1"
          :inactive-value="0"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm">重置</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>

    <el-dialog :append-to-body="true" :visible.sync="isDialog" width="600px" center>
      <el-tag
        v-for="(item,k) in tagList"
        :key="k"
        :disable-transitions="false"
        @click="selectTag(item.tag)">
        {{item.tag}}
      </el-tag>
    </el-dialog>
  </div>
</template>

<script>
  import {mavonEditor} from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'
  // import "mavon-editor/dist/markdown/github-markdown.min.css";
  import {
    queryAdminArticleDetail,
    queryAdminClassifyList,
    createArticle,
    updateArticleDetail,
    removeFile,
    upload,
    queryTags,
  } from "../../assets/api/getData";

  export default {
    name: "articleDetail",
    components: {
      mavonEditor
    },
    data() {
      return {
        isUpdate: false,
        articleForm: {
          id: null,
          title: "",
          description: "",
          content: "",
          classify: "",
          tags: [],
          isShow: 1,
          imgPath: "",
        },
        classifyList: [],
        rules: {},
        isDialog: false,
        tagList: []
      }
    },
    beforeMount() {
      this.isUpdate = JSON.parse(this.$route.query.isUpdate);
      if (this.isUpdate) {
        this.articleForm.id = this.$route.query.id;
        this.getArticleDetail();
      }
      this.getClassifyList();
    },
    methods: {
      selectTag(tag) {
        let index = this.articleForm.tags.findIndex(item => {
          return item == tag
        });
        if (index >= 0) {
          return
        }
        this.articleForm.tags.push(tag);
        this.isDialog = false;
      },
      async showTagDialog() {
        let {data} = await queryTags();
        this.tagList = data;
        this.isDialog = true;
      },
      closeTag(tag) {
        this.articleForm.tags.splice(this.articleForm.tags.indexOf(tag), 1);
      },
      async getClassifyList() {
        let res = await queryAdminClassifyList();
        this.classifyList = res.data;
      },
      async getArticleDetail() {
        let res = await queryAdminArticleDetail({id: this.articleForm.id});
        let detail = res.data;
        this.articleForm.isShow = detail.isShow;
        this.articleForm.classify = detail.classify;
        this.articleForm.tags = detail.tags;
        this.articleForm.content = detail.content;
        this.articleForm.description = detail.description;
        this.articleForm.title = detail.title;
        this.articleForm.imgPath = detail.imgPath;
      },
      async submitForm() {
        let res;
        if (this.isUpdate) {
          res = await updateArticleDetail(this.articleForm);
        } else {
          res = await createArticle(this.articleForm);
        }
        this.$message.success(res.message);
        this.$router.push({
          path: "/articleManage"
        });
      },
      resetForm() {
        this.getArticleDetail();
      },
      // 绑定@imgAdd event
      async $imgAdd(pos, $file) {
        // 第一步.将图片上传到服务器
        let res = await upload({
          directory: "blog",
          file: $file,
        });
        this.$refs.mavon.$img2Url(pos, res.data);
      },
      async $imgDel(pos) {
        let res = await removeFile(pos[0]);
        this.$message.success(res.message);
      },
      beforeUpload(file) {
        let fileSize = file.size;
        if (fileSize <= 0) {
          this.$message.warning('上传文件大小不能为空!');
          return false
        }
        if (fileSize > 5 * 1024 * 1024) {
          this.$message.warning('上传文件大小不能大于5M!');
          return false
        }
      },
      async uploadFile(param) {
        let res = await upload({
          directory: "coverPicture",
          file: param.file,
        });
        this.articleForm.imgPath = res.data;
        this.$refs['cover'].clearFiles();
      },
    }
  }
</script>

<style lang="less">

</style>
